// 提供一段可复用的逻辑: 随着页面的上下滚动 产出一个距离顶部的像素值

import { useEffect, useState } from "react"

// useWindowScroll 函数  -> y + setY

function useWindowScroll () {
  // useState useEffect
  const [y, setY] = useState(0)
  // 根据滚动距离的发生 不断地去计算当前的像素值 把像素值交给y
  // 思路: 1.滚动事件scroll  2.在滚动事件回调中不断去获取距离顶部的像素值 3.把像素值交给y
  useEffect(() => {
    window.addEventListener('scroll', () => {
      const top = document.documentElement.scrollTop
      setY(top)
    })
  }, [])
  return [y]
}


// 1. 理解可复用的逻辑？

// vue composition Api === react  hooks

// 解决的问题都是为了更好的逻辑复用

// 模块复用  组件复用  -> 少写代码

// 1. 我只提供一个可以跟随页面滚动不断发生变化的数据y   
// 2. 我只提供一个可以进行true或者false切换的逻辑

// 他们的复用维度更小  而且只有js


// 2. 封装自定义hook函数的通用做法

// 1. 以一个固定的名称作为函数的名字  useXxx
// 2. 在函数的内部 通过各种手段 维护一个响应式的数据状态 + 修改这个状态的方法
// 3. 在函数的末尾 把数据状态 + 修改数据的方法 以一个固定的数组形式或者对象形式return
// 4. 在函数组件的内部执行这个函数 并且解构赋值 数据和方法




export default useWindowScroll